<template>
  <div class="main">
    <div class="topbtn">
      <top-back @child-back="parentEvent">
        <template v-slot:btn>
          <button class="preserve" @click="save">保存</button>
        </template>
      </top-back>
    </div>

    <div class="steps-box">
      <a-steps v-model:current="current">
        <a-step title="处理完成"></a-step>
        <a-step title="正在处理"></a-step>
        <a-step title="等待处理"></a-step>
        <a-step title="等待处理"></a-step>
      </a-steps>

    </div>

    <div class="form-box">

      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="{ span: 24 }">
        <div class="top-bpx">
          <blue-title :text="'基础信息'"></blue-title>
          <a-row class="row_box">
            <a-col :span="8">
              <a-form-item label="我是标题" name="name">
                <a-input v-model:value="formState.name" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="Activity zone">
                <a-select v-model:value="formState.region" placeholder="请选择">
                  <a-select-option value="shanghai">Zone one</a-select-option>
                  <a-select-option value="beijing">Zone two</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="我是标题11">
                <a-checkbox-group v-model:value="formState.checkbox" :options="plainOptions" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row class="row_box">
            <a-col :span="8">
              <a-form-item label="我是标题11">
                <a-range-picker v-model:value="formState.timeRange" value-format="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="我是标题">
                <a-date-picker v-model:value="formState.time" value-format="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="Activity zone">
                <a-switch v-model:checked="formState.delivery" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="row_box">
            <a-col :span="9">
              <a-form-item label="Activity zone">
                <a-select v-model:value="formState.region1" placeholder="请选择" mode="tags">
                  <a-select-option value="shanghai">Zone one</a-select-option>
                  <a-select-option value="beijing">Zone two</a-select-option>
                  <a-select-option value="beijing2">Zone two1</a-select-option>
                  <a-select-option value="beijing3">Zone two2</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div class="top-bpx bottom-box">
          <blue-title :text="'其他信息'"></blue-title>

          <a-row class="row_box">
            <a-col :span="24">
              <div class="ipt-box">
                <div class="label">我是输入框：</div>
                <a-textarea v-model:value="formState.textarea" placeholder="请输入" allow-clear />
              </div>

            </a-col>
          </a-row>
          <a-row class="row_box">
            <a-col :span="8">
              <div class="ipt-box">
                <div class="label required">文件上传：</div>
                <fileUpload ref="img" :fileDatas="imgList1"></fileUpload>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="ipt-box">
                <div class="label">文件上传1：</div>
                <fileUpload ref="img" :fileDatas="imgList1"></fileUpload>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="ipt-box">
                <div class="label">文件上传2：</div>
                <fileUpload ref="img" :fileDatas="imgList1"></fileUpload>
              </div>
            </a-col>
          </a-row>
          <a-row class="row_box">
            <a-col :span="24">
              <div class="ipt-box">
                <div class="label">图片上传：</div>
                <imgUpload ref="img" :pfileList="imgList2"></imgUpload>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRaw } from 'vue'
import topBack from "@/components/Topback/index.vue";
import blueTitle from "@/components/blueTitle/index.vue";
import { Form } from 'ant-design-vue';
import fileUpload from "@/components/fileUpload/index.vue";
import imgUpload from "@/components/imgUpload/index.vue";
// const formState = ref({
//   textarea: "我是输入框",
//   checkbox: ['Apple'],
//   name: '我是测试',
//   region1: ['beijing', 'beijing1'],
//   region: 'shanghai',
//   delivery: false,
//   time: "2023-09-27",
//   timeRange: ['2023-10-04', '2023-10-05'],
// })

const formState = ref({
  textarea: "",
  checkbox: [],
  name: '',
  region1: [],
  region: '',
  delivery: false,
  time: "",
  timeRange: [],
})

const imgList1 = ref([
  {
    uid: "1",
    name: "xxx.png",
    status: "done",
    response: "Server Error 500", // custom error message to show
    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
  },
]);

const imgList2 = ref([
  {
    uid: "-1",
    name: "image.png",
    status: "done",
    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
  },
]);
const rules = ref({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'change' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ]
})
const useForm = Form.useForm;
const { resetFields, validate, validateInfos } = useForm(formState, rules, {
  onValidate: (...args) => console.log(...args),
});
const current = ref<number>(0);


const labelCol = { style: { width: '120px' } };

const parentEvent = () => {
  console.log("返回");
  resetFields()
}

const save = () => {
  validate()
    .then(() => {
      console.log(toRaw(formState.value));


    })
    .catch(err => {
      console.log('error', err);
    });
}

const plainOptions = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' }
];


</script>

<style scoped lang="scss">
.required {
  position: relative;
  padding-left: 10px;
}

.required::before {
  content: "*";
  color: red;
  position: absolute;
  top: 2px;
  left: 0;
}

.main {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  padding: 20px;

  .preserve {
    min-width: 88px;
    padding: 0 18px;
    height: 32px;
    background-color: rgba(24, 139, 255, 1);
    border: 1px solid rgba(24, 139, 255, 1);
    border-radius: 2px;
    cursor: pointer;
    color: rgba(255, 255, 255, 1);
  }

  .steps-box {
    background-color: #fff;
    padding: 20px 100px;

    ::v-deep .ant-steps-item-icon {
      line-height: 26px
    }
  }


  .form-box {
    height: calc(100% - 124px);
    overflow-y: auto;

    .top-bpx {
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      padding: 20px;
      margin-top: 20px;
      padding-bottom: 0;

      .row_box {
        .ipt-box {
          margin-bottom: 10px;

          .label {
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            margin-bottom: 8px;
          }
        }

        .row_box:last-child {
          .ipt-box {
            margin-bottom: 0;
          }
        }

        .ant-col:nth-child(2) {
          .ant-form-item {
            padding-right: 0px;
          }
        }

        .ant-form-item {
          display: flex;
          margin-right: 20px;
          margin-bottom: 15px;
          padding-right: 20px;

          // width: 30%;
          ::v-deep .ant-form-item-label {
            // width: 100%;
            line-height: 32px;
            text-align: left;
          }

          ::v-deep .ant-form-item-control {
            line-height: 32px;



            .ant-select-selection {
              border-radius: 2px;
            }

            .ant-input {
              border-radius: 2px;
              height: 32px;
              width: 220px;
              padding-left: 10px;
            }

            textarea.ant-input {
              height: auto;
              width: 100%;
            }

            .ant-picker {
              height: 32px;
              width: 220px;
              padding: 4px 11px 4px;
            }

            .ant-select {
              width: 220px;
            }
          }
        }

        .item-input {
          .ant-form-item {
            padding-right: 0px;
          }
        }

        .item-textarea {
          width: 100%;
          display: flex;
          margin-right: 20px;
          margin-bottom: 20px;

          // padding-right: 20px !important;
          ::v-deep .ant-form-item-label {
            width: 100%;
            line-height: 32px;
            text-align: left;
          }

          ::v-deep .ant-form-item-control-wrapper {
            width: 100%;
            line-height: 32px;

            .ant-input {
              height: 80px;
              border-radius: 2px;
            }

            .ant-form-item-control {
              line-height: 32px;
            }
          }
        }

        .ant-col-24,
        .ant-col-9,
        .ant-col-20 {
          .ant-form-item-control {
            .ant-select {
              width: 100%;
            }

            .ant-input {
              height: unset;
              width: 100%;
            }
          }

        }
      }
    }

    .bottom-box {
      padding-bottom: 20px;
    }
  }

}
</style>